<template>
  <div class="release-box">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.push('/layout/home')" />
    <div class="release-header active">
      <h3>房源信息</h3>
    </div>
    <van-cell class="list" title="小区名称" is-link :value="$route.query.estateName?$route.query.estateName:'请输入小区名称'" @click="$router.push('/estate')" />
    <div class="mj-input">
      <van-field class="list" v-model="faData.price" type="number" label="租金" placeholder="请输入租金/月" />
      <span>￥/月</span>
    </div>
    <div class="mj-input">
      <van-field class="list" v-model="faData.size" type="number" label="建筑面积" placeholder="请输入建筑面积" />
      <span>㎡</span>
    </div>
    <van-cell class="list" is-link @click="showTypeFn" title="户型" :value="typeLabel?typeLabel:'请选择'" />
    <van-popup v-model="showType" position="bottom" :style="{ height: '40%' }">
      <van-picker show-toolbar :columns="typeList" @confirm="typeConfirm" />
    </van-popup>
    <van-cell class="list" is-link @click="showFloorFn" title="所在楼层" :value="floorLabel?floorLabel:'请选择'" />
    <van-popup v-model="showFloor" position="bottom" :style="{ height: '40%' }">
      <van-picker show-toolbar :columns="floorList" @confirm="floorConfirm" />
    </van-popup>
    <van-cell class="list" is-link @click="showOriFn" title="朝向" :value="oriLabel?oriLabel:'请选择'" />
    <van-popup v-model="showOri" position="bottom" :style="{ height: '40%' }">
      <van-picker show-toolbar :columns="oriList" @confirm="oriConfirm" />
    </van-popup>
    <div class="release-header">
      <h3>房源标题</h3>
    </div>
    <van-field class="list" v-model="faData.title" placeholder="请输入标题（例如：整租 小区名 2室 5000元）" />
    <div class="release-header">
      <h3>房源图像</h3>
    </div>
    <div class="house-pic">
      <div class="scpic">
        <van-uploader v-model="imageList" multiple :after-read="afterRead" :max-count="4">
          <van-button  icon="plus" class="add-pic" type="default"></van-button>
        </van-uploader>
      </div>
    </div>
    <div class="release-header">
      <h3>房源配置</h3>
    </div>
    <div class="assort-list">
      <van-grid :column-num="5" :border="false">
        <van-grid-item :class="{active:item.type}" @click="assortFn(item,index)" v-for="(item,index) in supporting" :key="item.value" icon="photo-o" :text="item.label" />
      </van-grid>
    </div>
    <div class="release-header">
      <h3>房源描述</h3>
    </div>
    <div class="house-ms-box">
      <van-field
        v-model="faData.description"
        rows="1"
        autosize
        class="release-field"
        type="textarea"
        placeholder="请输入房屋描述信息"
      />
    </div>
    <div class="release-footer">
      <van-button class="active" type="default">取消</van-button>
      <van-button type="primary" @click="sunHouseFn">提交</van-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'HaokezfHouseRelease',

  data () {
    return {
      area: '',
      estateId: '',
      showType: false,
      showFloor: false,
      showOri: false,
      assorArr: [],
      typeList: [],
      roomType: [],
      typeLabel: '',
      floorList: [],
      floor: [],
      floorLabel: '',
      oriList: [],
      oriented: [],
      oriLabel: '',
      supporting: [],
      imageList: [],
      imgList: [],
      faData: {
        title: '',
        description: '',
        houseImg: '',
        oriented: '',
        supporting: '',
        price: '',
        roomType: '',
        size: '',
        floor: '',
        community: ''
      }
    }
  },

  created () {
    this.getHouseParams()
    this.faData.community = this.$route.query.estateId ? this.$route.query.estateId : ''
  },

  mounted () {},

  methods: {
    async getHouseParams () {
      const { body } = await request({
        url: '/houses/params'
      })
      this.typeList = body.roomType.map(item => item.label)
      this.roomType = body.roomType
      this.floorList = body.floor.map(item => item.label)
      this.floor = body.floor
      this.oriList = body.oriented.map(item => item.label)
      this.oriented = body.oriented
      this.supporting = body.supporting.map(item => {
        return {
          label: item.label,
          value: item.value,
          type: false
        }
      })
    },
    showTypeFn () {
      this.showType = true
    },
    showFloorFn () {
      this.showFloor = true
    },
    showOriFn () {
      this.showOri = true
    },
    typeConfirm (value, index) {
      this.typeLabel = this.roomType[index].label
      this.faData.roomType = this.roomType[index].value
      this.showType = false
    },
    floorConfirm (value, index) {
      this.floorLabel = this.floor[index].label
      this.faData.floor = this.floor[index].value
      this.showFloor = false
    },
    oriConfirm (value, index) {
      this.oriLabel = this.oriented[index].label
      this.faData.oriented = this.oriented[index].value
      this.showOri = false
    },
    async afterRead (file) {
      const { body } = await request({
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        url: '/houses/image',
        method: 'POST',
        data: {
          file: file.file
        }
      })
      this.imgList.push(body[0])
      this.faData.houseImg = this.imgList.join('|')
    },
    assortFn (item, index) {
      this.supporting[index].type = !this.supporting[index].type
      if (this.supporting[index].type) {
        this.assorArr.push(item.label)
      } else {
        const assIndex = this.assorArr.indexOf(item.label)
        this.assorArr.splice(assIndex, 1)
      }
      this.faData.supporting = this.assorArr.join('|')
    },
    async sunHouseFn () {
      try {
        await request({
          url: '/user/houses',
          method: 'POST',
          data: this.faData
        })
        this.$toast.success('发布成功')
        this.$router.push('/layout/home')
      } catch (err) {

      }
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.release-box {
  padding-bottom: 70px;
  background-color: #f5f5f9;
}
.active {
  color: #21b97a;
}
.release-header {
  width: 100%;
  height: 41px;
  padding: 12px 15px 12px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  h3 {
    font-size: 15px;
    font-weight: 400;
  }
}
.list {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  line-height: 44px;
  background-color: #fff;
  /deep/ .van-cell__right-icon {
    line-height: 44px;
  }
}
.mj-input {
  position: relative;
  width: 100%;
  height: 44px;
  span {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #888;
    font-size: 14px;
  }
}
.house-pic {
  width: 100%;
  height: 109px;
  background-color: #fff;
  .scpic {
    width: 100%;
    height: 94px;
    padding: 9px 8px 0;
    margin-bottom: 15px;
    background-color: #fff;
    .add-pic {
      width: 83px;
      height: 83px;
    }
  }
}
.assort-list {
  width: 100%;
  height: 160px;
  padding-bottom: 20px;
  background-color: #f6f5f6;
  /deep/ .van-grid-item__content {
    padding: 7px 0;
  }
  /deep/ .van-grid-item__text {
    color: unset;
  }
}
.release-field {
  width: 100%;
  height: 147px;
  padding: 10px 15px 9px;
  background-color: #fff;
}
.release-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  /deep/ .van-button {
    width: 50%;
    height: 100%;
  }
}
</style>
